<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        dl {
            border-bottom: 2px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        dl .show {min-height:72px;border: 1px solid #ddd;}
    </style>
</head>
<body>
<pre>
    修饰符

    .lazy
    在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

    .number
    如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

    .trim
    如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入


</pre>
<div id="app">
    <dl>
        <dt>.lazy</dt>
        <dd>
            <input type="text" v-model="name">
            <input type="text" v-model.lazy="lazyName">
        </dd>
        <dd class="show">
            name:
            <div>{{name}}</div>
            lazyName:
            <div>{{lazyName}}</div>
        </dd>
    </dl>


    <dl>
        <dt>.number</dt>
        <dd>
            <input type="text" v-model="age">
            <input type="text" v-model.number="numberAge">
        </dd>
        <dd class="show">
            age:
            <div>{{age}}</div>
            numberAge:
            <div>{{numberAge}}</div>
        </dd>
    </dl>



</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            name:'',
            lazyName:'',

            age:'',
            numberAge:''
        },
        watch:{
            age: function (newVal) {
                console.log('age:',newVal,typeof newVal)
            },
            numberAge: function (newVal) {
                console.log('numberAge:',newVal,typeof newVal)
            }
        }
    });

</script>
</html>